<template>
  <!--:show-close="false" :modal="true"  -->
  <el-dialog :title="modalObj.title" :visible.sync="visible" width="1200px" :before-close="cancelModal" :close-on-click-modal="false" :close-on-press-escape="false">
    <!--<button type="button" aria-label="Close" class="el-dialog__headerbtn" @click.stop="cancelModal"><i class="el-dialog__close el-icon el-icon-close"></i></button>-->
    <el-form :model="orderForm" ref="orderForm" :rules="addRules" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="费用周期" label-width="88px" prop="feeCycle">
        <el-date-picker clearable size="small"
                        v-model="orderForm.feeCycle" type="month"
                        value-format="yyyy-MM"
                        placeholder="选择费用周期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="园区" label-width="88px" prop="parkId">
        <el-select clearable size="small"  v-model="orderForm.parkNum"
                   placeholder="请选择园区" @change="handleParkNumChange">
          <el-option
            v-for="item in parkList"
            :key="item.id"
            :label="item.parkNum"
            :value="item.parkNum">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="表编码" prop="meterNum">
        <el-select clearable v-model="orderForm.meterNum" placeholder="请选择表编码">
          <el-option v-for="item in meterList" :key="item.meterNum" :label="item.meterName" :value="item.meterNum">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleCompute">计算</el-button>
      </el-form-item>
    </el-form>

    <!--  @selection-change="handleSelectionChange"  -->
    <el-table :data="nyCheckSumList" row-key="id" :tree-props="{children: 'children', hasChildren: 'hasChildren'}" >
      <!--<el-table-column type="selection" width="55" align="center" />-->
      <el-table-column label="表编码" align="center" prop="meterNum" />
      <el-table-column label="费用周期" align="center" prop="feeCycle" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.feeCycle, '{y}-{m}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="上期度数" align="center" prop="lastValue" />
      <el-table-column label="本期度数" align="center" prop="currentValue" />
      <el-table-column label="实际量" align="center" prop="actualDosage" />
      <el-table-column label="汇总量" align="center" prop="privateSum" />
      <el-table-column label="差值" align="center" prop="diffValue" />
      <el-table-column label="使用企业" align="center" prop="enterpriseName" />
      <!--显示是否已累加-->
      <!--<el-table-column label="是否已累加" align="center" prop="isComputed" :formatter="isComputedFormat" />-->
    </el-table>

    <pagination v-show="total>0" :total="total" :page.sync="orderForm.pageNum" :limit.sync="orderForm.pageSize"></pagination>
    <!--@pagination="getList"/>-->
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">加入分摊</el-button>
      <el-button @click="cancelModal">取 消</el-button>
    </div>
    <!--<div class="app-container">-->
      <!--<el-row :gutter="10" class="mb8">-->
        <!--<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>-->
      <!--</el-row>-->
    <!--</div>-->

  </el-dialog>
</template>
<script>
  import { listNyCheckSum,computePlus1 ,addNyCheckSums} from "@/api/smartParks/energy/energyMeterRading";
  import {listNyMeterAccount} from "@/api/smartParks/energy/energyMeterSummaryTable";
  import { listBuiPark } from "@/api/parkAssets/enterCommunity"
  export default {
    props: {
      visible: {
        type: Boolean,
        default: false
      },
      modalObj: {
        type: Object,
      }
    },
    data(){
      return {
        total: 0,
        meterList:[],
        nyCheckSumList:[],
        parkList:[],
        // 显示搜索条件
        showSearch: true,
        orderForm: {
          pageNum: 1,
          pageSize: 10,
          meterId: null,
          meterType: '',
          meterNum: null,
          category: '总表',
          feeCycle: null,
        },
        addRules: {
          feeCycle: [
            { required: true, message: "费用周期不能为空", trigger: "blur" }
          ],
          parkId: [
            { required: true, message: "园区不能为空", trigger: "blur" }
          ],
        }
      }
    },
    created() {
      this.orderForm.meterType = this.modalObj.meterType;
      listNyMeterAccount({meterType: this.orderForm.meterType,category:'总表'}).then((response) => {
        this.meterList = response.rows;
      });
      listBuiPark().then((response) => {
        this.parkList = response.rows;
      });
    },
    methods: {
      initForm(){
        if(this.$refs.orderForm){
          this.$refs.orderForm.resetFields();
        }
      },
      handleParkNumChange(parkNum){
        this.orderForm.meterType = this.modalObj.meterType;
        listNyMeterAccount({meterType: this.orderForm.meterType,category:'总表',parkNum:parkNum}).then((response) => {
          this.meterList = response.rows;
        });
      },
      getList(){
        listNyCheckSum(this.orderForm).then(response => {
          //返回的是树结构，前端无法显示，修改后台返回list,或者前台树形显示
          this.nyCheckSumList = response.rows;
          this.total = response.total;
          this.loading = false;
        });
      },
      handleCompute(){
        computePlus1(this.orderForm).then(response => {
          //if(response.code == '200'){
          //this.getList();
          this.nyCheckSumList = response.rows;
          this.total = response.total
          if(response.msg != ""){
            this.$alert(response.msg, "计算结果", { dangerouslyUseHTMLString: true });
          }
          //}
        });
      },
      submitForm(){
        //console.log("submit form");
        addNyCheckSums(this.nyCheckSumList).then(response => {
          this.msgSuccess("新增成功");
          this.cancelModal();
          //this.open = false;
          //this.getList();
        });
      },
      cancelModal(){
        // 关闭弹窗，触发父组件修改visible值
        this.$emit('update:visible', false);
      }
    }
  }
</script>
<style lang="scss" scoped>
  .buttons-wrap {

    .el-button {
      margin-right: 20px;
      min-width: 100px;
    }
  }
</style>
